﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - Pie Sparkline</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <script id="scriptInit" type="text/javascript">
    /*code_begin*/
    $(document).ready(function () {
        var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"));
        initSpread(spread);
    });

    function initSpread(spread) {
        var spreadNS = GcSpread.Sheets;
        
        var sheet = spread.sheets[0];
        sheet.isPaintSuspended(true);

        sheet.addSpan(0, 0, 1, 4);
        sheet.getCell(0, 0).value("My Assets").font("20px Arial").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center);
        var table1 = sheet.addTable("table1", 1, 0, 7, 4, spreadNS.TableStyles.medium4());
        table1.rowFilter().setShowFilterButton(false);
        sheet.setValue(1, 0, "Asset Type");
        sheet.setValue(1, 1, "Amount");
        sheet.setValue(1, 2, "Diagram");
        sheet.setValue(1, 3, "Note");
        sheet.setValue(2, 0, "Savings");
        sheet.setValue(2, 1, 25000);
        sheet.setValue(3, 0, "401k");
        sheet.setValue(3, 1, 55000);
        sheet.setValue(4, 0, "Stocks");
        sheet.setValue(4, 1, 15000);
        sheet.setValue(5, 0, "House");
        sheet.setValue(5, 1, 250000);
        sheet.setValue(6, 0, "Bonds");
        sheet.setValue(6, 1, 11000);
        sheet.setValue(7, 0, "Car");
        sheet.setValue(7, 1, 7500);
        sheet.setFormatter(-1, 1, "$#,##0");
        sheet.addSpan(2, 2, 6, 1);
        sheet.setFormula(2, 2, '=PIESPARKLINE(B3:B8,"#919F81","#D7913E","CEA722","#B58091","#8974A9","#728BAD")');
        sheet.getCell(2, 3).backColor("#919F81").formula("=B3/SUM(B3:B8)");
        sheet.getCell(3, 3).backColor("#D7913E").formula("=B4/SUM(B3:B8)");
        sheet.getCell(4, 3).backColor("#CEA722").formula("=B5/SUM(B3:B8)");
        sheet.getCell(5, 3).backColor("#B58091").formula("=B6/SUM(B3:B8)");
        sheet.getCell(6, 3).backColor("#8974A9").formula("=B7/SUM(B3:B8)");
        sheet.getCell(7, 3).backColor("#728BAD").formula("=B8/SUM(B3:B8)");
        sheet.setFormatter(-1, 3, "0.00%");
        sheet.setRowHeight(0, 50);
        for (var i = 1; i < 8; i++) {
            sheet.setRowHeight(i, 25);
        }
        sheet.setColumnWidth(0, 100);
        sheet.setColumnWidth(1, 100);
        sheet.setColumnWidth(2, 200);

        sheet.isPaintSuspended(false);
    };

    /*code_end*/
    </script>

</head>
<body>
<div class="sample-turtorial">
    <div id="ss" style="width:100%; height:420px;border: 1px solid gray;"></div>
</div>
</body>
</html>
